<template>
  <div class="post-comment">
    <van-field
      ref="field"
      v-model="message"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入评论"
      show-word-limit
    />
    <van-button
      :disabled="!message"
      :loading="postLoading"
      size="mini"
      @click="onPost"
      >发布</van-button
    >
  </div>
</template>

<script>
import { addComment } from "@/api/comment";

export default {
  name: "PostComment",
  props: ["target", "articleId", "inReply", "comment"],
  data() {
    return {
      message: "", // 输入框内容
      postLoading: false, // 发布评论按钮的loading状态
    };
  },
  methods: {
    async onPost() {
      this.postLoading = true;
      const { data } = await addComment({
        target: this.target, // 评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）
        content: this.message, // 评论内容
        art_id: this.articleId, // 	文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
      });
      if (this.inReply) {
        this.$bus.$emit("reply-success", this.comment);
      } else {
        this.$bus.$emit("post-success", data.data.new_obj);
      }
      this.postLoading = false;
      this.message = "";
      this.$toast.success("发布成功");
    },
  },
  mounted() {
    this.$refs["field"].focus();
  },
};
</script>

<style scoped lang="less">
.post-comment {
  display: flex;
  align-items: center;

  .van-button {
    width: 40px;
    margin-right: 10px;
  }
}
</style>
